<template>
  <div class="box">
    <div class="container">
      <el-button
        v-if="step > 1"
        type="primary"
        class="pull-left button"
        @click="goBack">
        <span class="el-icon-arrow-left"></span>上一步
      </el-button>
      <div :class="`item first-item${step === 1 ? ' active': ''}`">
        <span class="step">1</span>
        <span class="function">挑选成果</span>
      </div>
      <div :class="`item${step === 2 ? ' active': ''}`">
        <span class="step">2</span>
        <span class="function">预览电子版</span>
      </div>
      <el-button
        type="primary"
        class="pull-right button"
        :disabled="!active"
        :loading="loading"
        @click="submit">
        下一步<span class="el-icon-arrow-right"></span>
      </el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      };
    },
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      active: Boolean,
      step: Number,
    },
    methods: {
      submit() {
        this.$emit('save');
      },
      goBack() {
        this.$router.push({ name: 'edit-attachment', params: { id: this.$route.params.id } });
      }
    },
  }
</script>
<style scoped>
  @import './variables.css';

  .group .item:first-child {
    opacity: 1;
  }
  .group .item:first-child .step {
    color: #fff;
    background-color: #32a14a;
  }

  .box {
    text-align: center;
    background-color: #fff;
    font-size: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.30);
    width: 100%;
    .item {
      display: inline-block;
      position: relative;
      opacity: .5;
      padding: 12px 0;
      &.active {
        opacity: 1;
        .step {
          color: var(--color-white);
          background: var(--color-primary);
        }
      }
      .item-wrap {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      .step {
        display: inline-block;
        font-size: 18px;
        color: var(--color-primary);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid var(--color-primary);
        vertical-align: middle;
      }
      .function {
        font-size: 12px;
        color: #3c3c3c;
        margin-bottom: 0;
        vertical-align: middle;
        margin-left: 10px;
      }
      &.first-item {
        margin-right: 117px;
      }
    }
    .button {
      border: 0;
      font-size: 15px;
      border-radius: 0;
      height: 50px;
      padding: 6px 19px;
    }
  }
</style>
